<template>
    <div>
        <!-- 商品顶部(显示服装类型，默认值'商品列表') -->
        <listTop :title="titleName" :config="config"></listTop>
        <!-- 列表页导航栏 -->
        <listNav @showPopup="SetFilterPopup"></listNav>
        <!-- 商品列表页 -->
        <listInfo :listData="listData" @getListInfo='getListInfo' :scrollConf="scrollConf"></listInfo>
        <!-- 商品筛选页 -->
        <listFilter @setSelectedInfo='SetSelectedInfo' @setFirstTitle='SetFirstTitle' @setSecondTitle='SetSecondTitle' :selectedInfoData='selectedInfoData' :categoryPopupStateData='categoryPopupStateData' :filterPopupStateData='filterPopupStateData' @SetCategoryPopup='SetCategoryPopup' @hiddenPopup='SetFilterPopup' @setFirstAll='SetFirstAll' @setSecondAll='SetSecondAll' @setSecondItem='SetSecondItem' @setCategoryItem='SetCategoryItem' :firstTitleStateData='firstTitleStateData' :firstTitleData='firstTitleData' :secondTitleData='secondTitleData' :secondTitleStateData='secondTitleStateData' :firstAllData='firstAllData' :secondAllData='secondAllData' :secondItemData='secondItemData' :filterData="filterData" :categoryItemStateData='categoryItemStateData' :categoryItemData='categoryItemData'></listFilter> 
        <!-- 返回顶部 -->
        <backToTop></backToTop>          
    </div>
</template> 
<script>
import config from '../../../config'
import { mapActions, mapState } from 'vuex'
import listTop from '../../public/default/publicTop.vue'
import listNav from './listNav.vue'
import listInfo from './listInfo.vue'
import listFilter from './listFilter.vue'
import backToTop from '../../public/default/backToTop.vue'
export default {
    data() {
        return {
            config: config.TopConfig.list
        }
    },
    computed: {
        ...mapState({
            // 和modules文件同级的index.js传过来的值 (默认为 '商品列表')
            titleName: function(state) {
                return state.title
            },
            // 列表页数据
            listData: function(state) {
                return state.list.listData
            },
            // 筛选页数据
            filterData: function(state) {
                return state.list.filterData
            },
            // scroll控件配置
            scrollConf: function(state) {
                return state.list.scrollConf
            },
            // 筛选弹窗状态
            filterPopupStateData: function(state) {
                return state.list.filterPopupState 
            },
            // 全部分类弹窗状态
            categoryPopupStateData: function(state) {
                return state.list.categoryPopupState 
            },   
            // 点击全部分类中的一级标题，(比如)男装
            firstTitleData: function(state) {
                return state.list.firstTitle 
            }, 
            // 点击全部分类中的一级标题状态
            firstTitleStateData: function(state) {
                return state.list.firstTitleState 
            },  
            // 点击全部分类中的二级标题，(比如)男装下面的'T恤'
            secondTitleData: function(state) {
                return state.list.secondTitle 
            }, 
            // 点击全部分类中的二级标题状态
            secondTitleStateData: function(state) {
                return state.list.secondTitleState 
            },  
            // 点击全部分类中的一级标题中的全部，(比如)男装下的'全部
            firstAllData: function(state) {
                return state.list.firstAll 
            }, 
            // 点击全部分类中的二级标题中的全部，(比如)男装-->T恤下的'全部'  
            secondAllData: function(state) {
                return state.list.secondAll 
            },
            // 点击全部分类中的二级标题中的任意一项(除了全部)，(比如)男装-->T恤下的'长袖T恤' 
            secondItemData: function(state) {
                return state.list.secondItem 
            }, 
            // 点击(比如) '品牌', 显示弹层,初始状态关闭    
            categoryItemStateData: function(state) {
                return state.list.categoryItemState 
            }, 
            // 点击(比如) '品牌', 渲染'品牌'的数据  
            categoryItemData: function(state) {
                return state.list.categoryItem 
            }, 
            // 筛选页中选中当前元素
            selectedInfoData: function(state) {    
                return state.list.selectedInfo 
            } 
        })
    },
    mounted() {
        // 页面加载就调用
        this.setTitle()
        this.getFilterInfo()
    },
    methods: {
        // 和modules文件同级的index.js传过来的方法。 搜索框的值，默认为 '商品列表' 
        setTitle() {
            var title = this.$route.query.word || this.$t('product')
            this.SetTitle(title + this.$t('list'))
        },
        setRequestParams(params) {
            this.SetRequest(Object.assign({}, this.$route.query, this.$route.params, params))
        }, 
        // 调用列表页数据的请求 
        getListInfo(params) {
            this.SetRequest(Object.assign({}, this.$route.query, this.$route.params, params))
            this.SetCurrentPage(params.currentPage)
            this.SetList()
        },
        // 调用筛选页数据的请求
        getFilterInfo(params) {
            this.SetRequest(Object.assign({}, this.$route.query, this.$route.params, params))
            this.SetFilter()
        },
        ...mapActions({
            SetTitle: 'setTitle',
            SetList: 'list/setList',
            SetFilter: 'list/setFilter',
            SetCurrentPage: 'list/setCurrentPage',
            SetRequest: 'list/setRequest',
            SetScrollConf: 'list/setScrollConf',
            SetFilterPopup: 'list/setFilterPopup',
            SetCategoryPopup: 'list/setCategoryPopup',
            SetSelectedInfo: 'list/setSelectedInfo',
            SetFirstTitle: 'list/setFirstTitle',
            SetSecondTitle: 'list/setSecondTitle',
            SetFirstAll: 'list/setFirstAll',
            SetSecondAll: 'list/setSecondAll',
            SetSecondItem: 'list/setSecondItem',
            SetCategoryItem: 'list/setCategoryItem'
        })
    },
    components: {
        listTop,
        listNav,
        listInfo,
        listFilter,
        backToTop
    }
}
</script>


